<!DOCTYPE html>
<html>
<head>
	<title title="慕课网-程序员的梦工厂">慕课网-程序员的梦工厂</title>
	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	
	.header
	{
		width: 1999.99px;
		height: 72px;
		margin: 0 auto;
		position: relative;
		box-shadow: 4px 4px 4px #C0C0C0;
	}
	.tupian{
		margin: 0px;
		float: left;
	}
	.nav
	{
		list-style: none;
		margin: 22px;
		float: left;
		}
	.nav li
	{
		float:left;
	}
	.nav a
	{
		text-decoration: none;
		font-size: 20px;
		color: black;
		margin: 20px;
	}
	.content
	{
		width: 450px;
		height: 60px;
		margin: 13px;
		position: absolute;
		left: 800px;
		

	}
	.parent
	{
		position: ;absolute

	}
	.search{
		width: 400px;
		height: 50px;
		border-radius: 10px;
		padding-left: 10px;
        background-color: #e9e9e9;
        border: none;
        outline: none;
        float: left;
	}
	.btnn
	{
		width: 25px;
		height: 25px;
        border: none;
        background-color: #e9e9e9;
        background-image: url(logo02.png);
        outline: none;
        float: left;
        position: absolute;
        right: 50px;
        top: 13px;
	}
	.click
	{
		display: block;
		position: absolute;
		top: 9px;
		right: 80px;
	}
	.click a
	{
		text-decoration: none;
		font-size: 22px;
		margin: 10px;
		color: black;
	}
	.click2
	{
		font-size: 22px;
		float: left;
		list-style: none;
		color: black;
		position: absolute;
		left: 1320px;
		top:22px;
	}
	.click2 li a
	{
		text-decoration: none;
		color: black；	
	}

	.chuxian1
	{
		width: 360px;
		height: 230px;
		display: none;
	}
	.click3:hover .chuxian1
	{
		display: block;
	}
	.btn2 
	{
		display: block;
		position: absolute;
		left:1440px;
		top:15px;
		margin-top: -15px;
		width: 146px;
		height: 63px;
		background-image: url(logo05.png);
	}
	.btn2:hover
	{
		background-image: url(logo06.png);
	}
	.chuxian2
	{
		width: 400px;
		height: 495px;
		position: absolute;
		top:55px;
		display: none;
	}
	.btn2:hover .chuxian2
	{
		display:block;
	}
	.denglu
	{
		position: absolute;
		list-style: none;
		left:1630px;
        top:19px;
	}
	.denglu li
	{
		float:left;

	}
	.denglu  a
	{
		text-decoration: none;
		list-style: none;
		color:black;
		font-size:23px;

	}
	.continer1
	{
		width: 2000px;
		height: 1000px;
		background-color:;
		margin: 0 auto;
		position: relative;
		box-shadow: 0px 4px 8px #C0C0C0;
	}
	.lunfantu
	{
		width: 1500px;
		height: 480px;
		background-color: pink;
		border-radius: 15px;
		position: absolute;
		left:190px;
		top:40px;
	}
	.lunfanzuo
	{
		width: 260px;
		height: 480px;
		background-color: #2b333b;
		border-radius: 15px; 
	}
	.nav2
	{
		list-style: none;
		padding:5px 10px 25px ;
	}
	.nav2 li
	{
        margin-top: 35px;
        margin-left: 10px;
	}
	.nav2 a
	{
		text-decoration: none;
		font-size: 22px;
		color: #D8D8D8;
	}
	.lunfanyou
	{
		width: 1260px;
		height: 480px;
		background-color: yellow;
		position:absolute;
		bottom:0px;
		left:260px;
	}
	.containern{
 
        width: 100%;
 
        height: 500px;
 
        position: relative;
 
    }
 
    .contentn{
 
        width: 1260px;
 
        height: 480px;
 
        position: relative;
 
        overflow: hidden;
 
        
 
        margin: 0 auto;
 
    }
 
    .slider-img{
 
        width: 1260px;
 
        height: 480px;
 
        margin: 0px auto;
 
    }
 
    .slider-img img{
 
        vertical-align: top;
 
        width: 1260px;
 
        height: 480px;
 
        margin: 0px 0px;
 
        display: block;
 
    }
 
    .left{
 
        margin-top: -300px;
 
        margin-left: 50px;
 
        width: 20px;
 
        height: 20px;
 
 
 
    }
 
    .left img,.right img{
 
        width: 40px;
 
        height: 40px;
 
    }
 
    .right{
 
        margin-top: -100px;
 
        margin-right: 50px;
 
        float: right;
 
        width: 20px;
 
        height: 20px;
 
    }
 
 
 
    .dot{
 
        position: relative;
 
        top: 40%;
 
        left: 43%;
 
        width: 50%;
 
    }
 
    .dotul{
 
        width: 450px;
 
 
 
    }
 
    .dotul li{
 
        width: 20px;
 
        height: 20px;
 
        background-color: seagreen;
 
        list-style: none;
 
        float: left;
 
        border-radius: 20px;
 
        margin-left: 15px;
 
        z-index: 999;
 
        cursor: pointer;
 
    }
 
    .active{
 
        background-color: orangered !important;
 
    }
	.icon ion-chevron-left
	{
		position:absolute;
		left:200px;

	}
	.lunfanxia
	{   
        width: 1600px;
        height: 200px;
        background-color: ;
		font-size: 22px;
		color: #1C1F21;
		line-height: 32px;
		position:absolute;
		left:190px;
		top:550px;
	}
	.lunfanxia1
	{
		font-size: 35px;
		font-weight: bold;
	}
	.lunfanxiaxia
	{
		font-size: 22px;
		width: 1600px;
		height: 230px;
		background-color: ;
		position: absolute;
		left:190px;
		bottom:0;
	}
	.picture1
	{
       position: absolute;
       top:55px;
	}
	.lunfanxiaxia1
	{
       font-weight:bold;
       font-size: 35px;
	}
	.picture2
	{
		position: relative;
		top:20px;
		
	}
	.picture3:hover
	{
		box-shadow: 0px 4px 8px #C0C0C0;
	}
	.picture4:hover
	{
		box-shadow: 0px 4px 8px #C0C0C0;
	}
	.picture5:hover 
	{
		box-shadow: 0px 4px 8px #C0C0C0;
	}
	.picture6:hover 
	{
		box-shadow:0px 4px 8px #C0C0C0;
	}
	.picture7:hover 
	{
		box-shadow: 0px 4px 8px #C0C0C0;
	}
	.continer2
	{
		width: 2000px;
		height: 920px;
		background: ;
		margin: 0 auto;
		position: relative;
		box-shadow: 0px 4px 8px #C0C0C0;
	}
	.zi
	{
		font-size: 35px;
		font-weight: bold;
		position:absolute;
		left: 190px;
		top:50px;
	}
	.dakuai
	{
		width: 1800px;
		height: 750px;
		background-color: ;
		position: absolute;
		top:120px;
		left:100px;
	}
	.kuai
	{
		width: 400px;
		height: 350px;
		background-color: ;
		float:left;
		margin: 15px;

	}
	.kuaizhongzi
	{
		font-size: 25px;
		font-weight: bold;
	}
	.kuai:hover .kuaizhongzi
	{
		color: red;
	}
	.kuaizhongkuai
	{
		width: 400px;
		height: 60px;
		background: ;
		margin-top: 18px;
	}
	.continer3
	{
		width: 2000px;
        height: 950px;
        background:;
        margin: 0 auto;
        position: relative;
        box-shadow: 0px 4px 8px #C0C0C0;
	}
	.zizi
	{
		font-size: 35px;
		font-weight: bold;
		position: absolute;
		top:50px;
		left:140px;
	}
	.lianjie
	{
		position:absolute;
		left:320px;
		top:40px;
		list-style: none;
	}
	.lianjie li
	{
		float:left;
		margin:20px;
		text-decoration: none;
		list-style: none;
	}
	.lianjie a
	{
		text-decoration: none;
		color:black;
		font-size: 23px;
	}
	.lianjie li a:visit
	{
		text-decoration: line;
	}
	.lianjie li a:hover
	{
		color:red;
	}
	.lingkuai
	{
		width:800px;
		height: 230px;
		background-color: ;
		margin: 15px;
		float: left;
	}
	.lingkuaizi
	{
		font-size: 25px;
		font-weight: bold;
	}
	.kuaizuikuai
	{
        width: 550px;
        height: 150px;
        background-color: ;
        position:relative;
        left: 220px;
        bottom:190px;
	}
	
	.lingkuai:hover .lingkuaizi
	{
		color: red;
	}
	.lingdakuai
	{
		width: 1700px;
		height: 800px;
		background-color: ;
		position:absolute;
		top:140px;
		left:80px;
	}
	.continer4
	{
		width: 2000px;
		height: 950px;
        background: ;
        margin: 0 auto;
        box-shadow: 0px 4px 8px #C0C0C0;
        position: relative;
	}
	.zi4
	{
		font-size: 35px;
		font-weight: bold;
		position: absolute;
		top:60px;
		left:140px;
	}
	.dianji4
	{
		list-style:  none;
		position: absolute;
		left: 350px;
		top:50px;

	}
	.dianji4 li
	{
		float: left;
		margin: 20px;
	}
	.dianji4 a
	{
		text-decoration: none;
		font-size: 25px;
		color: black;
	}
	.dianji4 li a:hover
	{
        color: red;
	}

	.lipicture2
	{
		width: 404px;
		height: 278px;
		display:none;
	}
	.lipicture1:hover .lipicture2
	{
        display: block;
    }
    .lidakuai
    {
    	width: 1800px;
    	height: 760px;
    	background:;
    	position: absolute;
    	top:120px;
    	left:85px;
    }
    .continer5
	{
		width:2000px;
		height: 850px;
		background: ;
		margin: 0 auto;
		position: relative;
		box-shadow: 0px 4px 8px #C0C0C0;
	}
	.picture5zi
	{
		font-size: 35px;
		font-weight: bold;
		position: absolute;
		top:65px;
		left:110px;
	}
	.kuaitu
	{
		width: 1750px;
		height: 650px;
		background: ;
		position: absolute;
		left:90px;
		top:110px;
	}
	.tu1
	{
		margin: 15px;
	}
	.tu2
	{
		margin: 15px;
	}
	.tu3
	{
		margin: 15px;
	}
	.tu4
	{
		margin: 15px;
	}
	.tu5
	{
		margin: 15px;
	}
	.tu6
	{
		margin: 15px;
	}
	.tu1:hover
	{
		box-shadow: 0px 4px 8px #C0C0C0;
	}
	.tu2:hover
	{
		box-shadow: 0px 4px 8px #C0C0C0;
	}
	.tu3:hover
	{
		box-shadow: 0px 4px 8px #C0C0C0;
	}
	.tu4:hover
	{
		box-shadow: 0px 4px 8px #C0C0C0;
	}
	.tu5:hover
	{
		box-shadow: 0px 4px 8px #C0C0C0;
	}
	.tu6:hover
	{
		box-shadow: 0px 4px 8px #C0C0C0;
	}
	.footer
	{
		width:2000px;
		height: 136px;
		background: ;
		margin: 0 auto;
		position: relative;
	}
	.wanshi
	{
		list-style: none;
		position: absolute;
		left: 110px;
		top:30px;
	}
	.wanshi li
	{
        float: left;
        margin: 15px;
	}
	.wanshi a
	{
		text-decoration: none;
		font-size: 20px;
		color: grey;
	}
	.wanshi li a:hover
	{
		color: black;
	}
	.wanshitu
	{
		position: absolute;
		left:125px;
		top:70px;
	}
	.wanshitu2
	{
		float: left;
		position:absolute;
		left:1500px;
		top:30px;
	}
	.mas
	{
		display: none;
	}
	.fansi:hover .mas
	{
        display: block;
	}
	</style>
	<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css">
</head>
<body>
      <div class="header">
           <img title="慕课网" src="logo.png" class="tupian" >
           <ul class="nav">
             <li><a href="#">免费课程</a></li>
             <li><a href="#">实战课程</a></li>
             <li><a href="#">金职位</a></li>
             <li><a href="#">专栏</a></li>
             <li><a href="#">猿问</a></li>
             <li><a href="#">手记</a></li>
           </ul>
           <div class="content">
                  <input type="text" class="search" placeholder="请输入关键字...">
                  <div class="click">
                     <a  href="#">Vua</a>
                     <a  href="#">Python</a>
           		  </div>
                  <input type="button" name="" class="btnn">
              
           </div>
           
           <div class="click2">
                   <li >
                   <a class="click3" href="#">下载APP<div><img class="chuxian1" src="logo03.png"></div></a>
                   </li>
                   
           </div>
           
                <a class="btn2" href="#"><div><img class="chuxian2" src="logo04.png"></div></a>
           <div class="denglu">
                <li><a href="#">登录  &nbsp/</a></li>
                <li><a href="#">&nbsp  注册</a></li>
           </div>
      </div>
      <div class="continer1">
         <div class="lunfantu">
             <div class="lunfanzuo">
                 <ul class="nav2">
                    <li><a href="#">前沿/区域快/人工智能<div></a></li>
                    <li><a href="#">前端/小程序/JS</a></li>
                    <li><a href="#">后端/JAVA/Python</a></li>
                    <li><a href="#">移动/Android/iOS</a></li>
                    <li><a href="#">云计算/大数据/容器</a></li>
                    <li><a href="#">运维/测试/数据库</a></li>
                    <li><a href="#">UI设计/3D动画/游戏</a></li>
                 </ul>
             </div> 
             <div class="lunfanyou">
                 <div class="containern" id="contanern">
 
        <div class="contentn" id="contentn">
 
            <div class="slider-img" id="slider" >
 
                <a href="javascript:;">
 
                    <img src="logo13.png" alt="logo13.png" id="img">
 
                </a>
 
            </div>
 
        </div>
 
        <div class="btn">
 
            <div class="left" id="left">
 
                <a href=" ###"><img src="logo77.png"></a>
 
            </div>
 
            <div class="right" id="right">
 
                <a href=" ###"><img src="logo76.png"></a>
 
            </div>
 
        </div>
 
        <div class="dot">
 
            <ul id="ull" class="dotul">
 
                <li class="active"></li>
 
                <li></li>
 
                <li></li>
 
                <li></li>
 
                <li></li>

                <li></li>
 
            </ul>
 
        </div>
 
 
 
    </div>

                                  
             </div>  
         </div>
         <div class="lunfanxia">
            <span class="lunfanxia1">零基础就业</span>
            <span>零基础快速就业</span>
             <div class="picture1">
                 <a href="#"><img class="picture3" src="logo07.png"></a>
                 <a href="#"><img class="picture4" src="logo08.png"></a>
                 <a href="#"><img class="picture5" src="logo09.png"></a>
                 <a href="#"><img class="picture6" src="logo10.png"></a>
                 <a href="#"><img class="picture7" src="logo11.png"></a>
              </div>
          </div>
          <div class="lunfanxiaxia">
              <span class="lunfanxiaxia1">职场就业</span>
              <span>1年以上开发经验系统成长</span>
              <a href="#"><img class="picture2" src="logo12.png"></a>
          </div>
      </div>
      <div class="continer2">
          <p class="zi">新上好课</p>
            <div class="dakuai">
            <div class="kuai">
              <img src="demo20.jpg">
              <div class="kuaizhongkuai"><span class="kuaizhongzi">零基础学测试-从入门到就业</span></div>
              <img src="demo21.jpg">
            </div>
            <div class="kuai">
              <img src="demo22.jpg">
              <div class="kuaizhongkuai"><span class="kuaizhongzi">2020重学c++</span></div>
              <img src="demo23.jpg">
            </div>
            <div class="kuai">
              <img src="demo24.jpg">
              <div class="kuaizhongkuai"><span class="kuaizhongzi">TypeScript系统入门到项目实战趁早学习提高职场竞争力</span></div>
              <img src="demo25.jpg">
            </div>
            <div class="kuai">
              <img src="demo26.jpg">
              <div class="kuaizhongkuai"><span class="kuaizhongzi">Java项目面试实操 提升大厂面试成功率</span></div>
              <img src="demo27.jpg">
            </div>
            <div class="kuai">
              <img src="demo28.jpg">
              <div class="kuaizhongkuai"><span class="kuaizhongzi">玩转Java并发工具，精通JUC,成为并发多面手</span></div>
              <img src="demo29.jpg">
            </div>
            <div class="kuai">
              <img src="demo30.jpg">
              <div class="kuaizhongkuai"><span class="kuaizhongzi">全面系统python3入门+进阶 小白也能听懂（万人甄选口碑好课）</span></div>
              <img src="demo31.jpg">
            </div>
            <div class="kuai">
              <img src="demo32.jpg">
              <div class="kuaizhongkuai"><span class="kuaizhongzi">编程必备基础计算机组成原理+操作系统+计算机网络</span></div>
              <img src="demo33.jpg">
            </div>
            <div class="kuai">
              <img src="demo34.jpg">
              <div class="kuaizhongkuai"><span class="kuaizhongzi">Vue全家桶实战从零独立开发企业级电商系统（免费升级Vue3.0)</span></div>
              <img src="demo35.jpg">
            </div>
           </div>
      </div>
      <div class="continer3">
           <span class="zizi">学习路线</span>
               <ul class="lianjie">
                   <li><a href="#">热门</a></li>
                   <li><a href="#">前端</a></li>
                   <li><a href="#">后端</a></li>
                   <li><a href="#">移动端</a></li>
                   <li><a href="#">计算机基础</a></li>
                   <li><a href="#">大数据</a></li>
                   <li><a href="#">测试</a></li>
                   <li><a href="#">人工智能</a></li>
              </ul>
              <div class="lingdakuai">
            <div class="lingkuai">
               <img src="logo36.jpg">
               <div class="kuaizuikuai">
                  <span class="lingkuaizi">计算机基础学习路线</span>
                  <img src="logo42.png">
                </div>
            </div>
            <div class="lingkuai">
               <img src="logo37.jpg">
               <div class="kuaizuikuai">
                  <span class="lingkuaizi">Go语言从入门到达人之路</span>
                  <img src="logo43.png">
                </div>
            </div>
            <div class="lingkuai">
               <img src="logo38.jpg">
               <div class="kuaizuikuai">
                  <span class="lingkuaizi">MySQL数据库直通车：从入门到面试</span>
                  <img src="logo44.png">
                </div>
            </div>
            <div class="lingkuai">
               <img src="logo39.jpg">
               <div class="kuaizuikuai">
                  <span class="lingkuaizi">微信小程序从0基础到精通</span>
                  <img src="logo45.png">
                </div>
            </div>
            <div class="lingkuai">
               <img src="logo40.jpg">
               <div class="kuaizuikuai">
                  <span class="lingkuaizi">Python爬虫工程师养成计划</span>
                  <img src="logo46.png">
                </div>
            </div>
            <div class="lingkuai">
               <img src="logo41.jpg">
               <div class="kuaizuikuai">
                  <span class="lingkuaizi">Java从初级到高级的进阶面试线路图</span>
                  <img src="logo47.png">
                </div>
            </div>
            </div>
            </div>
      </div>
      <div class="continer4">
            <div class="zi4">
              <span >热门课程</span>
              <img class="lipicture1" src="logo48.png">
              <img class="lipicture2" src="logo49.png">
            </div>
            <ul class="dianji4">
              <li><a href="#">实战课程</a></li>
              <li><a href="#">免费课程</a></li>
            </ul>
            <div class="lidakuai"><div class="kuai">
              <img src="logo65.jpg">
              <div class="kuaizhongkuai"><span class="kuaizhongzi">Java通用型支付-电商平台双系统实战</span></div>
              <img src="logo50.jpg">
            </div>
            <div class="kuai">
              <img src="logo51.jpg">
              <div class="kuaizhongkuai"><span class="kuaizhongzi">Vue Element+Node.js开发企业通用管理后台系统</span></div>
              <img src="logo52.jpg">
            </div>
            <div class="kuai">
              <img src="logo53.jpg">
              <div class="kuaizhongkuai"><span class="kuaizhongzi">全流程开发TP6.0实战高并发电商服务系统</span></div>
              <img src="logo54.jpg">
            </div>
            <div class="kuai">
              <img src="logo55.jpg">
              <div class="kuaizhongkuai"><span class="kuaizhongzi">Java主流技术栈SSM+SpringBoot商铺系统</span></div>
              <img src="logo56.jpg">
            </div>
            <div class="kuai">
              <img src="logo57.jpg">
              <div class="kuaizhongkuai"><span class="kuaizhongzi">玩转算法系列--数据结构精讲 更适合0算法基础入门到进阶（java版）</span></div>
              <img src="logo58.jpg">
            </div>
            <div class="kuai">
              <img src="logo59.jpg">
              <div class="kuaizhongkuai"><span class="kuaizhongzi">Jetpack全组件实战 开发短视频应用App</span></div>
              <img src="logo60.jpg">
            </div>
            <div class="kuai">
              <img src="logo61.jpg">
              <div class="kuaizhongkuai"><span class="kuaizhongzi">Python3入门机器学习 经典算法与应用 轻松入行人工智能</span></div>
              <img src="logo62.jpg">
            </div>
            <div class="kuai">
              <img src="logo63.jpg">
              <div class="kuaizhongkuai"><span class="kuaizhongzi">Google资深工程师深度讲解Go语言</span></div>
              <img src="logo64.jpg">
            </div>
            </div>
      </div>
      <div class="continer5">
         <p class="picture5zi">慕课专栏</p>
         <div class="kuaitu">
            <a href="#"><img  class="tu1" src="logo66.jpg"></a>
            <a href="#"><img  class="tu2" src="logo67.jpg"></a>
            <a href="#"><img  class="tu3" src="logo68.jpg"></a>
            <a href="#"><img  class="tu4" src="logo69.jpg"></a>
            <a href="#"><img  class="tu5" src="logo70.jpg"></a>
            <a href="#"><img  class="tu6" src="logo71.jpg"></a>
         </div>
      </div>
      <div class="footer">
        <ul class="wanshi">
            <li><a href="#">企业合作</a></li>
            <li><a href="#">人才招聘</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">讲师招聘</a></li>
            <li><a href="#">帮助中心</a></li>
            <li><a href="#">意见反馈</a></li>
            <li><a href="#">慕课大学</a></li>
            <li><a href="#">代码托管</a></li>
            <li><a href="#">友情链接</a></li>
        </ul>
        <img class="wanshitu" src="logo72.png">
        <div class="wanshitu2">
          <img class="fansi" title="微信" src="logo73.png">
          <img src="logo74.png">
        </div>
        <img class="mas" src="logo75.png">
      </div>
      <script>
 
    
 
    var container = document.getElementById("containern");
 
    var content = document.getElementById("contentn");
 
    var slider = document.getElementById("slider");
 
    var img = document.getElementById("img");
 
    var ul = document.getElementById("ull");
 
    var li = document.getElementById("ull").getElementsByTagName("li");
 
    var left = document.getElementById("left");
 
    var right = document.getElementById("right");
 
    var num = 0;
 
    var timer = null;
 
 
 
 
 
    
 
    var arrUrl = ["logo13.png","logo14.png","logo15.png","logo16.png","logo17.png","logo18.png"];
 
    left.onclick = function (ev) {
 
        num--;
 
        if (num == -1){
 
            num = arrUrl.length-1;
 
        }
 
        changeImg();
 
    };
 
    right.onclick = function (ev) {
 
        num++;
 
        if (num == arrUrl.length){
 
            num = 0;
 
        }
 
        changeImg();
 
    };
 
    
 
    for (var i=0;i<arrUrl.length;i++){
 
           li[i].index = i;
 
           li[i].onclick = function (ev) {
 
               num = this.index;
 
               changeImg();
 
           }
 
    }
 
 
 
    setTimeout(autoPlay(),1000);
 
 
 
    
 
    content.onmouseover = function (ev) {
 
        clearInterval(timer);
 
    };
 
    content.onmouseout = autoPlay;
 
 
 
    
 
    function changeImg() {
 
        img.src = arrUrl[num];
 
        for (var i = 0;i< li.length;i++){
 
            li[i].className = "";
 
        }
 
        li[num].className = "active";
 
    }
 
    
    function autoPlay() {
 
        timer = setInterval(function () {
 
            num++;
 
            num %= arrUrl.length;
 
            changeImg();
 
        },2000);
 
    }
 
</script>
</body>
</html>